.ChartsClass {
    width: 100%;

    &.Echarts {
        padding: 16px;
        min-height: 200px;
    }

    &>.g2-tooltip {
        padding: 0 !important;
        overflow: hidden;

        .TooltipTemplateA01 {
            background: #fff;

            &>div:first-child {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 8px;
                background: #f0f0f0;
                font-family: ShuHeiTi;
                font-size: 16px;
                font-weight: bold;
                color: #262626;
            }

            &>div:last-child {
                padding: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                &>.standardTooltip {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &>div:nth-child(1) {
                        width: 12px;
                        height: 12px;
                        border-radius: 50%;
                    }

                    &>div:nth-child(2) {
                        border-radius: 50%;
                        margin: 0 8px;
                        font-family: PingFang;
                        font-size: 14px;
                        color: #262626;
                    }

                    &>div:nth-child(3) {
                        text-align: right;
                        flex: 1;
                        font-family: DIN;
                        font-size: 14px;
                        font-weight: bold;
                        color: #262626;
                    }
                }
            }
        }

        .TooltipTemplateA02 {
            background: #fff;

            &>div:first-child {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 8px;
                background: #f0f0f0;
                font-family: ShuHeiTi;
                font-size: 16px;
                font-weight: bold;
                color: #262626;

            }

            &>div:last-child {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 8px;
                font-family: DIN;
                font-size: 24px;
                font-weight: bold;
                color: #262626;

                &>span {
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                }
            }
        }
    }

    .EChartsTooltipClass {
        padding: 0 !important;
        border-radius: 8px !important;
        overflow: hidden;

        &>.HeatmapTooltip,
        &>.Bar3DTooltip {
            background: #fff;

            &>div:first-child {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 8px;
                background: #f0f0f0;
                font-family: ShuHeiTi;
                font-size: 16px;
                font-weight: bold;
                color: #262626;
            }

            &>div:last-child {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 8px;
                font-family: DIN;
                font-size: 24px;
                font-weight: bold;
                color: #262626;

                &>span {
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                }
            }
        }
    }


}